/** 属性组件 */
import { FC } from "react";
import { questionCheck_propsType } from ".";
import { Form, Input, Space, Button, Select, Checkbox } from "antd";
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { nanoid } from "nanoid";
const PropsComponent: FC<questionCheck_propsType> = (props) => {
    const { title, options = [], islock = false, onchange } = props
    const [form] = Form.useForm()
    const valuesChange = () => {
        let values = (form.getFieldsValue())
        values.options = values.options.map((item: any) => {
            if (item) {
                if (!item.hasOwnProperty('value')) {
                    item['value'] = nanoid()
                }
            }
            return item
        })
        if(values.options[values.options.length - 1]){
            if(onchange){
                onchange(values)
            }
        }
        
    }
    return <Form layout='vertical' form={form} initialValues={{ title, options }} onValuesChange={valuesChange} disabled={islock}>
        <Form.Item name='title' label='标题' >
            <Input />
        </Form.Item>
        <Form.Item label='选项'>
            <Form.List name="options" >
                {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ key, name }, index) => (
                            <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                <Form.Item
                                    name={[name, 'label']}
                                >
                                    <Input placeholder="请填写喜好" />
                                </Form.Item>
                                {index >= 1 && <MinusCircleOutlined onClick={() => remove(name)} />}

                            </Space>
                        ))}
                        <Form.Item>
                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                添加选项
                            </Button>
                        </Form.Item>
                    </>
                )}
            </Form.List>
        </Form.Item>
    </Form>
}

export default PropsComponent


